<template>
  <div>
    <Header></Header>
    <section>
      <Routers></Routers>
      <div id="section" class="main">
        <div class="common_header">
          <span class="common_header_tip">科技成果转化能力</span>
          <div>
            <!--<button class="common_header_btn">同步数据</button>-->
            <!--<select class="common_header_select" v-model="search_type" @change="search">-->
              <!--<option :value="item.id" v-for="(item, index) in typeList">{{item.name}}</option>-->
            <!--</select>-->
            <button class="common_header_btn" @click="add">添加</button>
            <!--<button class="common_header_btn" @click="imports">批量导入</button>-->
            <button class="common_header_btn" @click="batchDel">批量删除</button>
          </div>
        </div>

        <table class="common_table" cellspacing="0" cellpadding="0">
          <thead>
          <tr>
            <th><input type="checkbox" v-model='checked' @click='checkedAll'></th>
            <th>转化年度</th>
            <th>成果名称</th>
            <th>成果形成</th>
            <th>转化结果</th>
            <th>成果证明材料</th>
            <th>转化证明材料</th>
            <th>操作</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="(item ,index) in list" :key="index">
            <td><input type="checkbox" v-model='checkList' :value='item.id'></td>
            <td><span>{{item.year}}</span></td>
            <td><span>{{item.res_name}}</span></td>
            <td><span>{{item.res_way}}</span></td>
            <td><span>{{item.conversion_res}}</span></td>
            <td><span class="common_showpdf_text" @click="showPDF(1,item.id)">查看</span></td>
            <td><span class="common_showpdf_text" @click="showPDF(2,item.id)">查看</span></td>
            <!--<td><a :href="item.know_file.file_path" target="_blank" class="common_showpdf_text">{{item.know_info}}</a></td>-->
            <td class="operation_td">
              <span class="common_table_editBTN" @click="edit(item.id)">编辑</span>
              <span class="common_table_delBTN" @click="del(item.id)">删除</span>
            </td>
          </tr>
          </tbody>
        </table>

        <!--分页-->
        <ul class="pagination" >
          <li v-show="current != 1" @click="current-- && goto(current)" ><a href="#">上一页</a></li>
          <li v-for="index in pages" @click="goto(index)" :class="{'active':current == index}" :key="index">
            <a href="#" >{{index}}</a>
          </li>
          <li v-show="allpage != current && allpage != 0 " @click="current++ && goto(current++)"><a href="#" >下一页</a></li>
        </ul>
        <!--文字弹框 -->
        <div class="tankuang_box" v-if="tankuangISshow">
          <div class="tankuang">
            <p class="tankuangMSG">{{tankuangMSG}}</p>
            <button class="tankuang_ok_btn" @click="tankuangISshowBTN">确认</button>
          </div>
        </div>
        <!--批量导入弹框-->
        <div class="tankuang_box tankuang_box_import" v-if="importBoxISshow">
          <div class="tankuang">
            <i class="iconfont icon-guanbi tankuang_box_import_closeBTN" @click="closeImportBox"></i>
            <p class="tankuangMSG">温馨提示</p>
            <p class="tankuang_box_importMSG">请下载统一的模版，并按相应的格式在Excel软件中填写您的业务数据，然后再导入到系统中。</p>
            <input type="file" class="common_import" @change="import_file($event)">
            <p v-if="import_error" class="import_error_msg">{{import_error_msg}}</p>
            <div class="tankuang_btn_box">
              <button class="common_import_ok_btn">下载模板</button>
              <button class="common_import_cancel_btn" v-if="!comfirm_import">确定导入</button>
              <button class="common_import_ok_btn" v-if="comfirm_import" @click="comfirmImport($event)">确定导入</button>
            </div>
          </div>
        </div>

        <!--添加的弹框-->
        <div class="tankuang_box" v-if="boxISshow">
          <!--里面的白色盒子（需要自己设置宽高）-->
          <div class="add_tankuang">
            <!--顶部的文字和叉叉（通用）-->
            <div class="add_tankuang_header">
              <span>{{tankuang_title}}</span>
              <i class="iconfont icon-guanbi" @click="closeBox"></i>
            </div>
            <div class="add_tankuang_content">
              <div class="add_tankuang_content_box">
                <!--这里的内容是根据需要的内容加入（不通用）-->
                <ul class="common_tankuang_content">
                  <li>
                    <span>转化年度：</span>
                    <!--<input type="text" v-model="year">-->
                    <vue-datepicker-local v-model="year" format="YYYY" class="datepicker"/>
                  </li>
                  <li>
                    <span>成果名称：</span>
                    <input type="text" v-model="name">
                  </li>
                  <li>
                    <span>成果形式：</span>
                    <!--<input type="text" v-model="time">-->
                    <select v-model="type">
                      <option :value="item.name" v-for="(item, index) in typeList">{{item.name}}</option>
                    </select>
                  </li>
                  <li>
                    <span>转化结果：</span>
                    <input type="text" v-model="result">
                  </li>
                  <!--烦死了-->
                  <li class="file_box">
                    <span>成果证明材料：</span>
                    <div class="filebox">
                      <i class="upload_logo"></i>
                      <span class="upload_text">上传文件</span>
                      <input type="file" @change="upload($event,'achievements')">
                    </div>
                    <i class="inlineBlockIcon wenhao" @mouseover='hiddenboxISshow1' @mouseout="hiddenboxIShidden1" ></i>
                    <div class="hiddenbox" v-if="hiddenbox1">
                      <p>成果证明材料包括：专利、版权、期刊论文、高校院所成果引进、集成电路布图设计、科技成果登记证书、其他。</p>
                    </div>
                  </li>
                  <li class='files' v-if="achievements_upload_ed">
                    <ul>
                      <li v-for="(item, index) in achievements_file_list" class="fileList">
                        <p class="file_list">
                          <i class="file_logo"></i>
                          <span class="file_text" :class="{'file_text_uploading':achievements_upload_ings == index}">{{item.name}}</span>
                          <span class="del_text" @click="del_file(index,'achievements')" v-if="achievements_upload_ings != index">删除</span>
                        </p>
                      </li>
                    </ul>
                    <div class="progress" v-if="achievements_upload_ing">
                      <div :style="'width:'+achievements_w+'px'"></div>
                    </div>
                    <div style="display: block">
                      <p class="Common_files_tips_error" v-if="achievements_size_error">{{achievements_file_error_msg}}</p>
                      <p class="Common_files_tips">注：需上传成果证明材料，小于5M，PDF格式</p>
                    </div>
                  </li>

                  <!--好烦-->
                  <li class="file_box">
                    <span>转化证明材料：</span>
                    <div class="filebox">
                      <i class="upload_logo"></i>
                      <span class="upload_text">上传文件</span>
                      <input type="file" @change="upload($event,'conversion')">
                    </div>
                    <i class="inlineBlockIcon wenhao" @mouseover='hiddenboxISshow2' @mouseout="hiddenboxIShidden2"  ></i>
                    <div class="hiddenbox" v-if="hiddenbox2">
                      <p>转化证明材料包括：工艺规程、生产批文、销售合同、销售发票、用户报告、检测报告、生产许可证、其他</p>
                    </div>
                  </li>
                  <li class='files' v-if="conversion_upload_ed">
                    <ul>
                      <li v-for="(item, index) in conversion_file_list" class="fileList">
                        <p class="file_list">
                          <i class="file_logo"></i>
                          <span class="file_text" :class="{'file_text_uploading':conversion_upload_ing}">{{item.name}}</span>
                          <span class="del_text" @click="del_file(index,'conversion')" v-if="!conversion_upload_ing">删除</span>
                        </p>
                      </li>
                    </ul>
                    <div class="progress" v-if="conversion_upload_ing">
                      <div :style="'width:'+conversion_w+'px'"></div>
                    </div>
                    <div style="display: block">
                      <p class="Common_files_tips_error" v-if="conversion_size_error">{{conversion_file_error_msg}}</p>
                      <p class="Common_files_tips">注：需上传转化证明材料，小于5M，PDF格式</p>
                    </div>
                  </li>
                </ul>
                <!--底部的按钮（通用）-->
                <div class="add_tankuang_btnBOX">
                  <button class="add_tankuang_btn add_tankuang_btn_first" @click="save">保存</button>
                  <button class="add_tankuang_btn" @click="cancelSave">取消</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--删除确认框 -->
        <div class="tankuang_box" v-if="delISshow">
          <div class="tankuang">
            <p class="tankuangMSG">确认删除吗？</p>
            <div class="tankuang_btn_box">
              <button class="tankuang_ok_btn" @click="delBTN">确认</button>
              <button class="tankuang_ok_btn" @click="cancelDel">取消</button>
            </div>
          </div>
        </div>

        <!--pdf列表弹框 -->
        <div class="tankuang_box" v-if="PDFISshow">
          <div class="tankuang" id="pdflist_tankuang">
            <ul id="pdflist">
              <li v-for="(item, index) in pdfList">
                <i class="file_logo inlineBlockIcon"></i>
                <a :href="item.key" target="_blank" class="common_showpdf_text">{{item.name}}</a>
              </li>
            </ul>
            <button class="tankuang_ok_btn" @click="closePDFBOX">确认</button>
          </div>
        </div>

      </div>
    </section>
  </div>
</template>

<script>
  import Routers from '@/template/routers.vue'
  import Header from '@/template/common_header.vue'
  import VueDatepickerLocal from 'vue-datepicker-local'
  import { Toast } from 'mint-ui';
  export default {
    name: 'conversion',
    components: {
      Routers,
      Header,
      VueDatepickerLocal
    },
    data () {
      return {
        id:null,
        list:[],
        typeList:[
          {id:1, name:'专利'},
          {id:2, name:'软件著作权'},
          {id:3, name:'技术诀窍'},
          {id:4, name:'其他'}
        ],
        achievements_file_list:[],
        conversion_file_list:[],
        pdfList:[],
        search_type:'',

        year:'',
        name:'',
        type:'',
        result:'',

        achievements_file:'',
        achievements_file_name:'',
        achievements_w:0,
        achievements_progressBar:null,
        achievements_upload_ings:null,
        achievements_file_error_msg:'文件大小不能大于5M',
        conversion_file:'',
        conversion_file_name:'',
        conversion_w:0,
        conversion_progressBar:null,
        conversion_upload_ings:null,
        conversion_file_error_msg:'文件大小不能大于5M',

        /*控制*/
        boxISshow:false,
        delISshow:false,
        importBoxISshow:false,
        tankuangISshow:false,
        showpdf:false,
        achievements_upload_ed:false,
        achievements_upload_ing:false,
        achievements_size_error:false,
        conversion_upload_ed:false,
        conversion_upload_ing:false,
        conversion_size_error:false,
        PDFISshow:false,
        hiddenbox1:false,
        hiddenbox2:false,
        /**批量导入**/
//        importFile:'',
//        comfirm_import:false,
//        import_error:false,
//        import_error_msg:'',
        /****全选单选反选****/
        checked:false,
        checkList:[],
        /***删除***/
        del_list:[],
        /****分页****/
        current:1,
        showItem:5,
        allpage:1
        /***********/
      }
    },
    computed:{
      pages:function(){
        let pag = [];
        if( this.current < this.showItem ){ //如果当前的激活的项 小于要显示的条数
          //总页数和要显示的条数那个大就显示多少条
          let i = Math.min(this.showItem,this.allpage);
          while(i){
            pag.unshift(i--);
          }
        }else{ //当前页数大于显示页数了
          let middle = this.current - Math.floor(this.showItem / 2 ),//从哪里开始
            i = this.showItem;
          if( middle >  (this.allpage - this.showItem)  ){
            middle = (this.allpage - this.showItem) + 1
          }
          while(i--){
            pag.push( middle++ );
          }
        }
        return pag
      }
    },
    watch: {//深度 watcher
      'checkList': {
        handler: function(val, oldVal) {
          if (val.length === this.list.length) {
            this.checked = true;
          } else {
            this.checked = false;
          }
        },
        deep: true
      }
    },
    mounted: function() {
//      this.id = this.$route.params.id
      this.axios.get('/index/tec_list?page=1').then((res)=>{
        if(res.data.code==1){
          this.list = res.data.data
          this.allpage = res.data.last_page
        }else{
          this.list = []
        }
      })
    },
    methods: {
      /*分页*/
      goto (index) {
        this.current = index;
        //这里可以发送ajax请求
        this.axios.get('/index/tec_list?page='+this.current).then((res)=>{
          if(res.data.code==1){
            this.list = res.data.data
            this.allpage = res.data.last_page
          }else{
            this.list = []
          }
        })
      },
      /***全选*****/
      checkedAll () {
        let _this = this;
        if (!this.checked) {//实现全选
          _this.checkList = [];
          _this.list.forEach(function(item) {
            _this.checkList.push(item.id);
          });
        }else{//实现反选
          _this.checkList = [];
        }
      },
      /*删除*/
      del (id) {
        this.del_list = []
        this.del_list.push(id)
        this.delISshow = !this.delISshow
      },
      batchDel () {
        if(this.checkList.length<=0){
          this.tankuangMSG = '没有选择任何内容'
          this.tankuangISshow = !this.tankuangISshow
        }else{
          this.delISshow = !this.delISshow
        }
      },
      delBTN () {
        if(this.del_list.length>0){
          this.axios.post('/index/del_tec',{
            ids:JSON.stringify(this.del_list)
          }).then((res)=>{
            if(res.data.code==1){
              this.delISshow = !this.delISshow
              this.del_list = []
              this.axios.get('/index/tec_list?page='+this.current).then((res)=>{
                if(res.data.code==1){
                  this.list = res.data.data
                  this.allpage = res.data.last_page
                }else{
                  this.list = []
                }
              })
            }
          })
        }else{
          this.axios.post('/index/del_tec',{
            ids:JSON.stringify(this.checkList)
          }).then((res)=>{
            if(res.data.code==1){
              this.delISshow = !this.delISshow
              this.checkList = []
              this.checked = false
              this.axios.get('/index/tec_list?page='+this.current).then((res)=>{
                if(res.data.code==1){
                  this.list = res.data.data
                  this.allpage = res.data.last_page
                }else{
                  this.list = []
                }
              })
            }
          })
        }
      },
      /*搜索*/
//      search () {
//        this.axios.get('/index/tec_list?page=1&know_type='+this.search_type).then((res)=>{
//          if(res.data.code==1){
//            this.list = res.data.data
//            this.allpage = res.data.last_page
//          }else if(res.data.code==0){
//            this.list = []
//          }
//        })
//      },
      /*处理pdf文件*/
      upload (e,type) {
        if( type == 'achievements'){
          let files = e.target.files[0]
          let readers = new FileReader()
          readers.readAsDataURL(files)
          let _this = this
          if(_this.achievements_upload_ing){
            _this.achievements_size_error = true
            _this.achievements_file_error_msg = '文件正在上传，请稍后'
            return false
          }
          let obj = {
            name:files.name,
            key:''
          }
          _this.achievements_file_list.push(obj)
          let length = _this.achievements_file_list.length
          _this.achievements_size_error = false
          if(files.size > 5*1024*1024){
            _this.achievements_size_error = true
            _this.achievements_upload_ed = false
            _this.achievements_upload_ing = false
            _this.achievements_upload_ings = null
            _this.achievements_w = 0
          }else{
            readers.onload = function(e) {
              _this.achievements_upload_ed = true
              _this.achievements_upload_ing = true
              _this.achievements_upload_ings = length-1
              _this.axios.post('/index/upload_qiniu',{
                code:this.result
              }).then((res)=>{
                if(res.data.code==1){
                  _this.achievements_w = 200
                  clearTimeout(_this.achievements_progressBar)
                  _this.achievements_upload_ing = false
                  _this.achievements_upload_ings = null
                  _this.achievements_size_error = false
                  _this.achievements_file_list[length-1]['key'] = res.data.key
                  _this.achievements_w = 0
//                  console.log(_this.achievements_file_list)
                }else{
                  Toast(res.data.msg)
                  return
                }
              }).catch(function (error) {
                Toast('网络连接超时，请稍后重试！')
                return
              });
              let n = _this.achievements_w
              _this.achievements_progressBar = setInterval(function(){
                n+=5
                _this.achievements_w = n
                if(n>=65){
                  clearTimeout(_this.achievements_progressBar)
                }
              },150)
            }
          }
        }else {
          let file = e.target.files[0]
          let reader = new FileReader()
          reader.readAsDataURL(file)
          let _that = this
          if(_that.conversion_upload_ing){
            _that.conversion_size_error = true
            _that.conversion_file_error_msg = '文件正在上传，请稍后'
            return false
          }
          let obj = {
            name:file.name,
            key:''
          }
          _that.conversion_file_list.push(obj)
          let length = _that.conversion_file_list.length
          _that.conversion_size_error = false
          if(file.size > 5*1024*1024){
            _that.conversion_size_error = true
            _that.conversion_upload_ed = false
            _that.conversion_upload_ing = false
            _that.conversion_upload_ings = null
            _that.conversion_w = 0
          }else{
            reader.onload = function(e) {
              _that.conversion_upload_ed = true
              _that.conversion_upload_ing = true
              _that.conversion_upload_ings = length-1
              _that.axios.post('/index/upload_qiniu',{
                code:this.result
              }).then((res)=>{
                if(res.data.code==1){
                  _that.conversion_w = 200
                  clearTimeout(_that.conversion_progressBar)
                  _that.conversion_upload_ing = false
                  _that.conversion_upload_ings = null
                  _that.conversion_size_error = false
                  _that.conversion_file_list[length-1]['key'] = res.data.key
                  _that.conversion_w = 0
                }else{
                  Toast(res.data.msg)
                  return
                }
              }).catch(function (error) {
                Toast('网络连接超时，请稍后重试！')
                return
              });
              let n = _that.conversion_w
              _that.conversion_progressBar = setInterval(function(){
                n+=5
                _that.conversion_w = n
                if(n>=65){
                  clearTimeout(_that.conversion_progressBar)
                }
              },150)
            }
          }
        }
      },
      del_file (index,type) {
        if(type=='achievements'){
          this.achievements_file_list.splice(index,1)
        }else{/*conversion*/
          this.conversion_file_list.splice(index,1)
        }
      },
      /*点击查看pdf*/
      showPDF (type,id) {
        this.axios.get('/index/get_tec_files?type='+type+'&id='+id).then((res)=>{
          if(res.data.code==1){
            this.pdfList = res.data.data
            this.PDFISshow = true
          }else{
            Toast(res.data.msg)
            return
          }
        })
      },
      /*基础操作*/
      add () {
        this.boxISshow = true
        this.tankuang_title = '添加'
      },
      edit (id) {
        this.boxISshow = true
        this.tankuang_title = '编辑'
        this.axios.get('/index/show_tec?id='+id).then((res)=>{
          if(res.data.code==1){
            let datas = res.data.data
            this.year = String(datas.year)
            this.name = datas.res_name
            this.type = datas.res_way
            this.result = datas.conversion_res
            if(datas.res_files){
              this.achievements_file_list = datas.res_files
              this.achievements_upload_ed = true
            }else{
              this.achievements_file_list = []
            }
            if(datas.conv_files){
              this.conversion_file_list = datas.conv_files
              this.conversion_upload_ed = true
            }else{
              this.conversion_file_list = []
            }
            this.id = id
          }else{
            Toast(res.data.msg)
            return
          }
        })
      },
      save () {
        if(!this.year||!this.name||!this.type||!this.result||!this.achievements_file_list||!this.conversion_file_list){
          Toast('内容必须填写完整！！')
          return
        }
        let index = new Date(this.year).toLocaleDateString().indexOf('/')
        this.year = new Date(this.year).toLocaleDateString().replace(/\//ig,"-").slice(0,index)
        this.axios.post('/index/save_tec',{
          id:this.id||'',
          year:this.year,
          res_name:this.name,
          res_way:this.type,
          conversion_res:this.result,
          res_files:JSON.stringify(this.achievements_file_list),
          conv_files:JSON.stringify(this.conversion_file_list)
        }).then((res)=>{
          if(res.data.code==1){
            this.axios.get('/index/tec_list?page=1').then((res)=>{
              if(res.data.code==1){
                this.list = res.data.data
                this.allpage = res.data.last_page
              }else{
                this.list = []
                Toast(res.data.msg)
                return
              }
            })
            this.boxISshow = false
            this.year = ''
            this.name = ''
            this.type = ''
            this.result = ''
            this.achievements_file_list = []
            this.conversion_file_list = []
            this.achievements_upload_ed = false
            this.conversion_upload_ed = false
            this.id = null
          }else{
            Toast(res.data.msg)
            return
          }
        })
      },
      cancelSave () {
        this.boxISshow = false
        this.year = ''
        this.name = ''
        this.type = ''
        this.result = ''
        this.achievements_file_list = []
        this.conversion_file_list = []
        this.achievements_upload_ed = false
        this.conversion_upload_ed = false
        this.id = null
      },
      closeBox () {
        this.boxISshow = false
        this.year = ''
        this.name = ''
        this.type = ''
        this.result = ''
        this.achievements_file_list = []
        this.conversion_file_list = []
        this.achievements_upload_ed = false
        this.conversion_upload_ed = false
        this.id = null
      },
      cancelDel () {
        this.delISshow = !this.delISshow
      },
      tankuangISshowBTN () {
        this.tankuangISshow = !this.tankuangISshow
      },
      closePDFBOX () {
        this.PDFISshow = false
      },
      hiddenboxISshow1 () {
        this.hiddenbox1 = true
      },
      hiddenboxIShidden1 () {
        this.hiddenbox1 = false
      },
      hiddenboxISshow2 () {
        this.hiddenbox2 = true
      },
      hiddenboxIShidden2 () {
        this.hiddenbox2 = false
      }
    }
  }
</script>

<style scoped>
  @import '../../assets/public.css';
  @import '//at.alicdn.com/t/font_749860_je5eki3tevb.css';
  .datepicker{
    width:210px;
  }
  .add_tankuang{
    width:700px;
    height:600px;
  }
  .add_tankuang_content{
    overflow-y: auto;
  }
  .add_tankuang_content_box{
    overflow-y: auto;
  }
  .add_tankuang_btnBOX{
    padding-bottom:15px;
  }
  .common_tankuang_content{
    padding:40px 0 20px 0;
    display: block;
  }
  .common_tankuang_content>li{
    flex:1;
  }
  .common_tankuang_content>li>input{
    width:210px!important;
  }
  .common_tankuang_content>li>select{
    width:210px!important;
  }
  .common_tankuang_content>li>span{
    width:200px;
  }
  .tankuang{
    width:300px;
    height:157px;
    padding:30px;
  }
  .tankuang_ok_btn{
    padding:6px 15px;
    font-size:16px;
    width:110px;
    /*position: absolute;*/
    /*bottom:0;*/
  }

  .filebox{
    width:210px;
    height:32px;
    border: 1px solid #ddd;
    box-sizing: border-box;
    padding-left:5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  .filebox>input{
    position: absolute;
    top:0;
    left:0;
    z-index: 2;
    width:100%;
    height:100%;
    opacity: 0;
    cursor: pointer;
  }
  .filebox>span.upload_text{
    color: #888;
    font-size:16px;
  }
  .filebox>i.upload_logo{
    width:22px;
    height:22px;
    background-image: url("../../assets/img/upload.png");
    margin-right:5px;
    box-sizing: border-box;
  }

  .common_tankuang_content>li.files{
    display: block;
  }

  li.fileList{
    margin:5px 0;
  }
  p.file_list{
    width:410px;
    margin:0 auto;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  i.file_logo{
    width:19px;
    height:17px;
    background-image: url("../../assets/img/file.png");
    margin-right:5px;
  }
  p.file_list>span.file_text{
    color: #333;
    font-size:14px;
  }
  p.file_list>span.file_text.file_text_uploading{
    color: #888;
    font-size:14px;
  }
  p.file_list>span.del_text{
    color: #4797D4;
    font-size:14px;
    margin-left:5px;
    cursor: pointer;
  }
  div.progress{
    width:200px;
    height:3px;
    background: #f3f3f3;
    border-radius: 2px;
    position: relative;
    margin:10px auto 0;
  }
  div.progress>div{
    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:0;
    height:3px;
    background: #4797D4;
  }

  #pdflist_tankuang{
    width:500px;
    height:400px;
    overflow-y: auto;
  }
  #pdflist>li{
    display: flex;
    align-items: center;
    margin:10px 0;
  }
  #pdflist>li a{
    cursor: pointer;
  }

  /*问号一系列*/
  li.file_box{
    position: relative;
  }
  .wenhao{
    position: absolute;
    /*right:-32px;*/
    left: 420px;
    top:5px;
    /*transform: translateY(-50%);*/
    width:22px;
    height:22px;
    background: url("img/wenhao.png");
  }
  .hiddenbox{
    position: absolute;
    /*right:-277px;*/
    left: 445px;
    top:-60px;
    display: flex;
  }
  .hiddenbox>p{
    width:235px;
    height:117px;
    background: url("img/kuang.png");
    color: #333;
    font-size:15px;
    padding-left:34px;
    box-sizing: border-box;
    padding-top:17px;
    padding-right:11px;
  }
</style>
